import React from 'react';
import Link from 'next/link';

interface BannerProps {
  title: string;
  subtitle: string;
  buttonText?: string;
  buttonLink?: string;
  backgroundImage?: string;
}

const Banner: React.FC<BannerProps> = ({
  title,
  subtitle,
  buttonText = '了解更多',
  buttonLink = '/about',
  backgroundImage = '/images/banner-bg.jpg'
}) => {
  return (
    <div className="relative bg-gray-900 overflow-hidden">
      {/* Background image with overlay */}
      <div 
        className="absolute inset-0 bg-cover bg-center opacity-30"
        style={{ backgroundImage: `url(${backgroundImage})` }}
      />
      
      {/* Gradient overlay for better text readability */}
      <div className="absolute inset-0 bg-gradient-to-b from-black/50 to-transparent"></div>
      
      {/* Content */}
      <div className="container mx-auto px-4 pt-32 pb-24 md:py-48 relative z-10">
        <div className="max-w-3xl">
          <h1 className="text-4xl md:text-6xl font-bold text-white leading-tight mb-6 animate-fade-in-up">
            {title}
          </h1>
          <p className="text-lg md:text-xl text-gray-200 mb-8 opacity-90 max-w-xl animate-fade-in-up animation-delay-150">
            {subtitle}
          </p>
          {buttonText && buttonLink && (
            <div className="animate-fade-in-up animation-delay-300">
              <Link href={buttonLink}>
                <span className="btn inline-block px-8 py-4 text-lg rounded-full bg-blue-600 text-white hover:bg-blue-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 cursor-pointer font-medium">
                  {buttonText}
                  <svg className="w-5 h-5 ml-2 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                  </svg>
                </span>
              </Link>
            </div>
          )}
        </div>
      </div>
      
      {/* Wave shape at bottom */}
      <div className="absolute bottom-0 left-0 right-0">
        <svg 
          className="w-full h-12 md:h-24 text-white" 
          viewBox="0 0 1200 120" 
          preserveAspectRatio="none"
        >
          <path 
            d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V100.67C76.25,125.94,159.4,129.07,221.2,123.24,250.91,120.88,280.73,113.59,321.39,56.44Z" 
            fill="currentColor"
          />
        </svg>
      </div>
    </div>
  );
};

export default Banner; 